<template>
  <el-scrollbar style="height:100%;">
    <div class="bgk_container">
      <header>
        <div class="goBack">
          <i class="iconfont icon-zhuye" @click="goBackHome()"></i>
        </div>
        <div class="title">时间记录</div>
        <el-button type="primary" round class="timeLineBtn" @click="newDialogVisible = true">新时间线<i
            class="el-icon-edit"></i></el-button>
      </header>
      <el-table :data="timeLineTable" border style="width: 100%">
        <el-table-column prop="time" label="日期" width="200" align="center">
        </el-table-column>
        <el-table-column prop="content" label="时间线内容" align="center">
        </el-table-column>
        <el-table-column prop="" label="选项" width="200" align="center">
          <template v-slot="scoped">
            <el-button type="primary" @click="editDialogVisible = true;editCurrent(scoped.row._id)">编辑</el-button>
            <el-button type="danger" @click="deleteDialogVisible = true;deleteCurrent(scoped.row._id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 新建时间线对话框 -->
      <el-dialog title="新建时间线" :visible.sync="newDialogVisible" width="45%" @close="resetForm('ruleForm')">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="日期" prop="time">
            <el-input v-model="ruleForm.time"></el-input>
          </el-form-item>
          <el-form-item label="内容" prop="content">
            <el-input v-model="ruleForm.content"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="newDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="newDialogVisible = false;createTimeLine()">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 删除时间线对话框 -->
      <el-dialog title="提示" :visible.sync="deleteDialogVisible" width="30%">
        <span>确定要删除此时间线?</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="deleteDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="deleteDialogVisible = false;deleteTimeLine()">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 编辑时间线对话框 -->
      <el-dialog title="新建时间线" :visible.sync="editDialogVisible" width="45%" @close="resetEditForm('editRuleForm')">
        <el-form :model="editRuleForm" ref="editRuleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="日期" prop="time">
            <el-input v-model="editRuleForm.time"></el-input>
          </el-form-item>
          <el-form-item label="内容" prop="content">
            <el-input v-model="editRuleForm.content"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editDialogVisible = false;editTimeLine()">确 定</el-button>
        </span>
      </el-dialog>
      <transition name="fade">
        <loading v-if="isLoading"></loading>
      </transition>
    </div>
  </el-scrollbar>
</template>

<script>
import Loading from '../loading/loading.vue'
export default {
  components: { Loading },
  data() {
    return {
      timeLineTable: [],
      timeLineId: '',
      newDialogVisible: false,
      editDialogVisible: false,
      deleteDialogVisible: false,
      ruleForm: {
        time: '',
        content: ''
      },
      editRuleForm: {
        time: '',
        content: ''
      },
      rules: {
        time: [
          { required: true, message: '请输入日期', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入时间线内容', trigger: 'blur' }
        ]
      },
      // Loading状态
      isLoading: true
    }
  },
  created() {
    this.getAllTimeLine()
  },
  methods: {
    // 返回主页
    goBackHome() {
      this.$router.push('/BsHome')
    },
    // 获取所有时间线
    getAllTimeLine() {
      this.$http.get('timeline').then(response => {
        this.timeLineTable = response.data
        this.timeLineTable = this.timeLineTable.reverse()
        this.isLoading = false
      })
    },
    // 根据id获取时间线
    getCurrentTimeLine() {
      this.$http.get(`/timeline/${this.timeLineId}`).then(response => {
        this.editRuleForm.time = response.data.time
        this.editRuleForm.content = response.data.content
      })
    },
    // 当前选中的编辑/删除时间线的id
    deleteCurrent(id) {
      this.timeLineId = id
    },
    editCurrent(id) {
      this.timeLineId = id
      this.getCurrentTimeLine()
    },
    // 关闭对话框清除表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    resetEditForm(formName) {
      this.$refs[formName].resetFields()
    },
    // 新建时间线内容
    createTimeLine() {
      this.$http.post('timeline', {
        time: this.ruleForm.time,
        content: this.ruleForm.content
      }).then(response => {
        if (response.status === 200) {
          this.$message({
            type: 'success',
            message: '时间线发表成功!'
          })
          this.getAllTimeLine()
        } else {
          this.$message({
            type: 'error',
            message: '时间线发表失败!'
          })
        }
      })
    },
    // 删除时间线
    deleteTimeLine() {
      this.$http.delete(`/timelineDelete/${this.timeLineId}`).then(response => {
        if (response.status === 200) {
          this.$message({
            type: 'success',
            message: '时间线删除成功!'
          })
          this.getAllTimeLine()
        } else {
          this.$message({
            type: 'error',
            message: '时间线删除失败!'
          })
        }
      })
    },
    // 编辑时间线
    editTimeLine() {
      this.$http.put(`/timelineEdit/${this.timeLineId}`, {
        time: this.editRuleForm.time,
        content: this.editRuleForm.content
      }).then(response => {
        if (response.status === 200) {
          this.$message({
            type: 'success',
            message: '时间线修改成功!'
          })
          this.getAllTimeLine()
        } else {
          this.$message({
            type: 'error',
            message: '时间线修改失败!'
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.el-scrollbar__wrap {
  overflow-x: hidden;
}
/deep/.el-scrollbar__view {
  height: 100%;
}
.bgk_container {
  min-height: 100%;
  padding: 50px 150px;
  box-sizing: border-box;
  background-image: linear-gradient(
    to right,
    rgba(254, 217, 94, 0.6),
    rgba(158, 106, 255, 0.6),
    rgba(255, 106, 193, 0.6)
  );
  header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    .goBack {
      width: 128px;
      i {
        font-size: 30px;
        color: #1296db;
        cursor: pointer;
      }
    }
    .title {
      font-size: 26px;
      color: #333;
    }
    .timeLineBtn {
      i {
        margin-left: 8px;
      }
    }
  }
  .el-table {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  }
}
</style>
